<template lang="pug">
  .page
    .AccountsReceivableManage
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="70")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.pr-24.pl-24.font-16(slot="header")
            .pull-right.table-title-btns
              Button.mr-10(type="info" :disabled="!selectedId.length > 0" @click="handleShowInquiryModal(null)") 批量调整
              Button.mr-10(type="info" @click="handleShowBatchImportModal") 导入
              Button(type="warning" :disabled="!selectedId.length > 0" @click="isDeleteModal") 删除
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button(type="text" size="small" @click="handleShowInquiryModal(row)") 调整

    //- 批量导入弹窗
    BatchImportModal(ref="BatchImportModal" @query="searchFn")

    //- 是否调整
    InquiryModal(ref="InquiryModal" @query="searchFn")
</template>

<script>
import { Common } from '@/utils/common.js'
import { YearAdjustmentPercentApi } from '@/api/YearAdjustmentPercent.api.js'
import { socialTariffThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import BatchImportModal from './modal/batchImportModal.vue'
import InquiryModal from './modal/inquiryModal.vue'

export default {
  name: '', // 社保年度调整

  components: {
    BatchImportModal,
    InquiryModal
  },

  data () {
    return {
      thead: _cloneDeep(socialTariffThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        securityNO: ''
      },
      formItem: [
        { type: 'input', label: '参保编号：', placeholder: '请输入参保编号', prop: 'securityNO', model: 'securityNO', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6' },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-3 ivu-col-span-xxl-3' }
      ],
      rules: {},
      arrListDown: {
        type: []
      },
      effectTime: null
    }
  },
  computed: {
  },

  mounted () {
    this.query()
  },

  methods: {
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        Type: 3, // 2年度调整,3费率调整
        SecurityType: 1, // 1社会保险、2公积金、3商保
        SecurityNO: this.formData.securityNO,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await YearAdjustmentPercentApi.getList(params)
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows

        this.tableData.map(row => {
          var tempObj = {}
          row.details.map(item => { // 循环解析insureItems里面的companyFee、employeeFee值并赋到相应的key
            var sumStr = ''
            if (item.company) {
              Object.keys(item.company).forEach(key => {
                sumStr = item.securityTypeCode + 'Company' + key
                item[sumStr] = item.company[key]
                tempObj = {...tempObj, ...{[sumStr]: item.company[key]}}
              })
            }
            if (item.employee) {
              Object.keys(item.employee).forEach(key => {
                sumStr = item.securityTypeCode + 'Employee' + key
                item[sumStr] = item.employee[key]
                tempObj = {...tempObj, ...{[sumStr]: item.employee[key]}}
              })
            }
          })
          row.resetDetails = [tempObj]
        })
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 批量导入-显示弹窗
    handleShowBatchImportModal () {
      this.$refs.BatchImportModal.file = null
      this.$refs.BatchImportModal.errorData.isError = false
      this.$refs.BatchImportModal.isShowBatchImportModal = true
    },

    // 调整-显示弹窗
    handleShowInquiryModal (row) {
      console.log('row: ', row)
      if (row) {
        this.$refs.InquiryModal.ids = row.id
      } else {
        this.$refs.InquiryModal.ids = this.selectedId.join(',')
      }
      console.log('🧞‍ ', this.$refs.InquiryModal.ids)
      this.$refs.InquiryModal.show()
    },

    // 是否删除前询问
    isDeleteModal (row) {
      this.$Modal.confirm({
        title: '是否确认删除',
        onOk: () => {
          this.handleSureDelete(row)
        }
      })
    },

    // 确认删除
    async handleSureDelete () {
      let res = await YearAdjustmentPercentApi.delete({ id: this.selectedId.join(',') })
      console.log('res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
